{% extends 'base.html' %}

{% block title %}{{ product.name }} - 花店订单系统{% endblock %}

{% block content %}
<div class="container">
    <div class="row">
        <div class="col-md-6">
            {% if product.image %}
                <img src="{{ product.image.url }}" class="img-fluid rounded" alt="{{ product.name }}">
            {% else %}
                <img src="https://via.placeholder.com/600x400" class="img-fluid rounded" alt="默认图片">
            {% endif %}
        </div>
        <div class="col-md-6">
            <h2 class="mb-3">{{ product.name }}</h2>
            <p class="lead">{{ product.description }}</p>
            <div class="mb-3">
                <h4 class="text-primary">¥{{ product.price }}</h4>
                <p class="text-muted">库存: {{ product.stock }} 件</p>
            </div>
            {% if product.stock > 0 %}
                <form method="post" action="{% url 'orders:create_order' product.pk %}">
                    {% csrf_token %}
                    <div class="mb-3">
                        <label for="quantity" class="form-label">购买数量</label>
                        <input type="number" class="form-control" id="quantity" name="quantity" 
                               min="1" max="{{ product.stock }}" value="1" required>
                    </div>
                    <div class="mb-3">
                        <label for="address" class="form-label">收货地址</label>
                        <textarea class="form-control" id="address" name="address" rows="2" required></textarea>
                    </div>
                    <div class="mb-3">
                        <label for="phone" class="form-label">联系电话</label>
                        <input type="tel" class="form-control" id="phone" name="phone" required>
                    </div>
                    <div class="d-grid gap-2">
                        <button type="submit" class="btn btn-primary">立即购买</button>
                        <a href="{% url 'products:product_list' %}" class="btn btn-secondary">返回商品列表</a>
                    </div>
                </form>
            {% else %}
                <div class="alert alert-warning">
                    抱歉，该商品已售罄
                </div>
                <div class="d-grid">
                    <a href="{% url 'products:product_list' %}" class="btn btn-secondary">返回商品列表</a>
                </div>
            {% endif %}
        </div>
    </div>
</div>

<style>
    /* 商品图片样式 */
    .img-fluid {
        max-height: 400px;
        object-fit: contain;
    }
    
    /* 表单控件样式 */
    .form-control {
        max-width: 100%;
        margin-bottom: 0.5rem;
    }
    
    /* 数量输入框样式 */
    input[type="number"] {
        max-width: 200px;
    }
    
    /* 价格样式 */
    .text-primary {
        font-weight: bold;
    }
    
    /* 按钮间距 */
    .gap-2 {
        margin-top: 1rem;
    }
</style>
{% endblock %} 